<ion-header>
  <ion-toolbar>
    <div class="signin_title">
      <div class="brand"><img src="../../../../assets/images/android/drawable-mdpi/logo.png" alt=""></div>
      <div class="sign_btn" (click)="signIn()">{{'auth.verificationCode.sign_in' | translate}}</div>
    </div>
  </ion-toolbar>
</ion-header>
<div class="login_content">
  <form [formGroup]="validateForm" name="validateForm" role="form" (ngSubmit)="checkCode()">
    <ion-grid>
      <ion-row>
        <ion-col>
          <ion-label class="login_title">
            {{'auth.verificationCode.welcome_sign_up' | translate}}
          </ion-label>
        </ion-col>
      </ion-row>
      <ion-row>
        <ion-col>
          <ion-header class="header_word">
            {{'auth.verificationCode.tips1' | translate}}
          </ion-header>
        </ion-col>
      </ion-row>
      <ion-row>
        <ion-col class="input-border-bottom">
          <ion-grid>
            <ion-row>
              <ion-col size="9">
                <ion-input type="number" size=20 placeholder="{{'auth.verificationCode.code' | translate}}" clearInput="true" required formControlName="verificationCode"></ion-input>
              </ion-col>
              <ion-col size="3" class="send_words" *ngIf="!sendView">
                {{'auth.verificationCode.resend_after' | translate}} {{smsCountDown}}s
              </ion-col>
              <ion-col size="3" class="send_btn" *ngIf="sendView">
                <ion-button fill="clear" size="small" (click)="sendSMSCode()">
                  {{'auth.verificationCode.send' | translate}}
                </ion-button>
              </ion-col>
              <ion-col size="12" *ngIf="verificationCode.invalid && (verificationCode.dirty || verificationCode.touched)">
                <div *ngIf="verificationCode.errors.required" class="form-error-item">
                  {{'auth.verificationCode.code_required' | translate}}
                </div>
              </ion-col>
            </ion-row>
          </ion-grid>
        </ion-col>
      </ion-row>
      <ion-row>
        <ion-col>
          <ion-button class="customer-btn" fill="clear" expand="block" type="submit" [disabled]='validateForm.invalid || loading'>
            {{'auth.verificationCode.signup' | translate}}
            <ion-spinner [hidden]="!loading"></ion-spinner>
          </ion-button>
        </ion-col>
      </ion-row>
    </ion-grid>
  </form>
</div>